<template>
    <button @click="test1">测试1</button>
    <button @click="test2">测试2</button>
    <button @click="test3">测试3</button>
    <button @click="test4">删除id=4</button>
    {{ comments }}

    <div class="box" @scroll="throttleScrollHander">
        <div>佩奇</div>
        <div>乔治</div>
        <div>李敏</div>
        <div>汪哥</div>
        <div>泉峰</div>
        <div>张智恒</div>
        <div>张智恒</div>
        <div>张智恒</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'
import _ from 'lodash'

// 状态(响应式状态)变量（状态变量变化， 会迫使UI渲染更新）
let comments = ref([])


const scrollHander = async () => {
    console.log('滚动了')
    let { data } = await axios.get('http://127.0.0.1:5000/comments')
    console.log(data)
}

// 将滚动函数包装成节流函数，会返回一个新函数
const throttleScrollHander = _.throttle(scrollHander, 500)




const test4 = async () => {
    let { data } = await axios.delete('http://127.0.0.1:5000/delcomments?id=4')
    console.log(data)
}


const test3 = async () => {
    let { data } = await axios.get('http://127.0.0.1:5000/comments')
    console.log(data)
    comments.value = data.data
}


const test1 = () => {
    // 方式1：promise对象用then获取成功结果，catch失败结果
    axios.get('http://127.0.0.1:5000/cfdghdfghfghomments').then(response => {
        console.log(response.data)
    }).catch(err => {
        console.log('错误信息1：', err.message)
    })
}

const test2 = async () => {
    // 方式2：await等待promise对象成功的结果,失败了需要用try-catch进行捕获
    try {
        let response = await axios.get('http://127.0.0.1:5000/chgfdhdfdfomments')
        console.log(response.data)
    } catch (err) {
        console.log('错误信息2：', err.message)
    }

}


</script>

<style>
.box {
    width: 500px;
    margin: 50px auto;
    border: 5px solid #ccc;
    height: 400px;
    font-size: 80px;
    overflow: auto;
}
</style>
